import React, { useState } from 'react'
import '../assets/style/index.scss'
import {useNavigate,Outlet} from 'react-router-dom'
export default function Index() {
  const nav=useNavigate()
  const [toolbarList,setToolbarList]=useState([
    {
      icon:'iconfont icon-31shouye',
      selectedIcon:'iconfont icon-shouye',
      isActive:true,
      path:'/home'
    },
    {
      icon:'iconfont icon-fenlei1',
      selectedIcon:'iconfont icon-icon_category',
      isActive:false,
      path:'/category'
    },
    {
      icon:'iconfont icon-gouwuche1',
      selectedIcon:'iconfont icon-gouwuchefill',
      isActive:false,
      path:'/shopcart'
    },
    {
      icon:'iconfont icon-31wode',
      selectedIcon:'iconfont icon-wode',
      isActive:false,
      path:'/mine'
    }
  ])
  const go=(item,index)=>{
    
    console.log('aa',item.path);
    let ary=toolbarList.map((item,idx)=>{
        if(index===idx){
          return {
            ...item,
            isActive:true
          }
        }else{
          return{
            ...item,
            isActive:false
          }
        }
    })
    setToolbarList(ary)
    nav(item.path)
  }
  return (
    <div className='container'>
      <div className='content'>
        {/* 嵌套路由的出口 */}
        <Outlet></Outlet>
      </div>
      <div className='toolbar'>
         {
          toolbarList.map((item,index)=><div 
            className='item' 
            key={index}
            onClick={()=>{go(item,index)}}>
            <i className={item.isActive?item.selectedIcon:item.icon}></i>
          </div>)
         }
      </div>
    </div>
  )
}
